<template>
	<view class="pad-16r">
		<view class="health-item">
			<view class="heath-title">健康档案</view>
			<view class="health-row">
				<view>身高</view>
				<view class="flex-start">
					<u-input class="input" v-model="form.height" placeholder="请输入身高" input-align="right" />
					<view>cm</view>
				</view>
			</view>
			<view class="health-row">
				<view>体重</view>
				<view class="flex-start">
					<u-input class="input" v-model="form.weight" placeholder="请输入体重" input-align="right" />
					<view>kg</view>
				</view>
			</view>
			<view class="health-row">
				<view>民族</view>
				<view class="flex-start">
					<picker @change="bindPickerChangeNation" range-key="label" :value="form.nation" :range="listNation">
						<view class="uni-input"
							:style="{color: form.nation === undefined ? 'rgba(0, 0, 0, 0.24)' : ''}">
							{{nationLabel || '请选择民族'}} &gt;
						</view>
					</picker>
				</view>
			</view>
			<view class="health-row">
				<view>学历</view>
				<view class="flex-start">
					<picker @change="bindPickerChangeEdu" range-key="label" :value="form.educational"
						:range="listEducational">
						<view class="uni-input"
							:style="{color: form.educational === undefined ? 'rgba(0, 0, 0, 0.24)' : ''}">
							{{educationalLabel || '请选择学历'}} &gt;
						</view>
					</picker>
				</view>
			</view>
			<view class="health-row">
				<view>婚否</view>
				<view class="flex-start">
					<picker @change="bindPickerChangeMaray" range-key="label" :value="form.marry"
						:range="listMarryStatus">
						<view class="uni-input"
							:style="{color: form.maritalStatus === undefined ? 'rgba(0, 0, 0, 0.24)' : ''}">
							{{marryLabel || '请选择婚否'}} &gt;
						</view>
					</picker>
				</view>
			</view>
			<view class="health-row">
				<view style="width: 100%;">
					<view>家族史</view>
					<u-input v-model="form.familyHistory" placeholder="请输入家族史" type="textarea" :border="true"
						:height="70" :auto-height="true" />
				</view>
			</view>
			<view class="health-row">
				<view style="width: 100%;">
					<view>过敏史</view>
					<u-input v-model="form.familyHistory" type="textarea" placeholder="请输入过敏史" :border="true"
						:height="70" :auto-height="true" />
				</view>
			</view>
			<view class="health-row">
				<view style="width: 100%;">
					<view>既往史</view>
					<u-input v-model="form.familyHistory" type="textarea" placeholder="请输入既往史" :border="true"
						:height="70" :auto-height="true" />
				</view>
			</view>
		</view>
		<view class="btn-cc">
			<view class="cancel">
				<view class="text">取消</view>
			</view>
			<view class="comfirn" @click="confirm">
				<view class="text">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
	} from 'vuex';
	import {
		listEducational
	} from '../../utils/listEducational';
	import {
		listMarryStatus
	} from '../../utils/listMarryStatus';
	import {
		listNation
	} from '../../utils/listNation';

	export default {
		computed: {
			...mapGetters([
				'userInfo', 'hostApi'
			]),

		},
		data() {
			return {
				form: {

				},
				nationLabel: "",
				educationalLabel: "",
				marryLabel: "",
				listNation: [],
				listEducational: [],
				listMarryStatus: [],
			}
		},
		mounted() {
			this.form = this.userInfo
		},
		methods: {
			bindPickerChangeNation(e) {
				this.nationLabel = listNation[e.detail.value].label;
				this.$set(this.form, 'nation', listNation[e.detail.value].label)
			},
			bindPickerChangeEdu(e) {
				this.educationalLabel = listEducational[e.detail.value].label;
				this.$set(this.form, 'educational', listEducational[e.detail.value].label)
			},
			bindPickerChangeMaray(e) {
				this.marryLabel = listMarryStatus[e.detail.value].label;
				this.$set(this.form, 'marry', listMarryStatus[e.detail.value].label)
			},
			confirm() {

			}
		}
	}
</script>

<style scoped>
	.health-item {
		padding: 16rpx;
		border-radius: 16rpx;
		background-color: white;
	}

	.heath-title {
		border-left: 3px solid blue;
		padding: 0 10px;
		margin: 10px;
	}

	.health-row {
		line-height: 40px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid rgb(237, 242, 250);
	}
</style>